<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta charset="utf-8"/>

    <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>


    <link rel="stylesheet" href="jquery.mobile-1.0rc2.css" />

    <script src="jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>

    <script src="jquery.mobile-1.0rc2.js"></script>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="jquery.fn.gmap.full.min.js"></script>



    <script type="text/javascript">
        $('#basic_map').live("pageshow", function() {
				$('#map_canvas').gmap('refresh');
			});

        $('#mainPage').live("pagecreate", function() {

           $('#readBarcode').live('vclick', readBarcode);

           var coords = new google.maps.LatLng(-34.397, 150.644);

           var win = function(position) {
                 coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                createMap(coords);
           };

           var fail = function(e) {
                createMap(coords);
           };

            navigator.geolocation.getCurrentPosition(win, fail);

        });

        function createMap(coords) {
            var bluePillMapStyles = [
              {
                featureType: "landscape.man_made",
                stylers: [
                  { gamma: 0.87 },
                  { lightness: -54 },
                  { saturation: -45 },
                  { hue: "#ff8800" }
                ]
              },{
                featureType: "landscape.natural",
                stylers: [
                  { saturation: -8 },
                  { lightness: -51 },
                  { hue: "#ffe500" }
                ]
              },{
                featureType: "road",
                stylers: [
                  { lightness: -28 },
                  { hue: "#ffaa00" },
                  { saturation: -30 },
                  { visibility: "simplified" }
                ]
              },{
                featureType: "road.local",
                stylers: [
                  { invert_lightness: true },
                  { lightness: -5 },
                  { hue: "#ffa200" },
                  { saturation: 36 },
                  { visibility: "on" }
                ]
              },{
                featureType: "water",
                stylers: [
                  { hue: "#0022ff" },
                  { lightness: -67 },
                  { saturation: -27 }
                ]
              },{
                featureType: "administrative",
                stylers: [
                  { visibility: "off" }
                ]
              },{
                featureType: "transit",
                stylers: [
                  { visibility: "off" }
                ]
              },{
                featureType: "water",
                stylers: [
                  { visibility: "simplified" },
                  { hue: "#ffff00" },
                  { lightness: -27 },
                  { saturation: -23 }
                ]
              },{
                featureType: "poi",
                stylers: [
                  { visibility: "simplified" }
                ]
              },{
                featureType: "poi.business",
                stylers: [
                  { visibility: "off" }
                ]
              },{
                featureType: "poi.government",
                stylers: [
                  { visibility: "off" }
                ]
              },{
                featureType: "poi.medical",
                stylers: [
                  { visibility: "off" }
                ]
              },{
                featureType: "poi.school",
                stylers: [
                  { visibility: "off" }
                ]
              },{
                featureType: "poi.sports_complex",
                stylers: [
                  { visibility: "off" }
                ]
              }

            ];

            $('#map_canvas').gmap({'center': coords, 'disableDefaultUI': true, 'zoom': 13, 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'styles': bluePillMapStyles}).bind('init', function(evt, map) {
                    $('#map_canvas').gmap('addMarker', {'position': map.getCenter(), 'icon': 'ninja.png' }).click(function() {
                        $('#map_canvas').gmap('openInfoWindow', { 'content': 'Hello world!'}, this);
                    });
                });

            $('#map_canvas').gmap('addShape', 'Circle', { 'strokeColor': "#00BB00", 'strokeOpacity': 0.8, 'strokeWeight': 2, 'fillColor': "#00AA00", 'fillOpacity': 0.35, 'center': coords, 'radius': 500 });

        }

        function readBarcode() {
            window.plugins.barcodeScanner.scan( BarcodeScanner.Type.QR_CODE, function(result) {
                    alert("We got a barcode: " + result);
                }, function(error) {
                    alert("Scanning failed: " + error);
                }, {yesString: "Install"}
	        );
        }
    </script>

    <script src="barcodescanner.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
<div data-role="page" id="mainPage">
    <div data-role="header">
        <h1>BluePill</h1>
    </div><!-- /header -->

    <div data-role="content">
        <div>
            <div id="map_canvas" style="height:350px;"></div>
        </div>

        <button id="readBarcode">Read barcode</button>
    </div><!-- /content -->
    <div data-role="footer"></div>
</div>
</body>


</html>
